perf(css): audit :has() selectors and add stylelint guard for Safari by hectahertz · Pull Request #7708 · primer/react

hectahertz · 2026-03-27T17:25:50Z

Closes https://github.com/github/github-ui/issues/17224

In Aug 2025, a :has() selector on a broadly-present component caused 10-20+ second freezes on Safari due to quadratic style invalidation in WebKit (398 reactions, 86 participants, 446 points on HN). This PR audits all :has() usage in @primer/react and adds guardrails to prevent a repeat.

Audit summary: 46 :has() occurrences across 12 CSS Module files. All are low-risk because CSS Modules generate unique hashed class names, limiting the invalidation blast radius to a small subtree. The one dangerous pattern (body:has(...) in Dialog) was already mitigated with a feature flag guard.

Changes:

Stylelint rule (selector-pseudo-class-disallowed-list: ['has']) blocks new :has() by default. Developers must add a stylelint-disable with justification.
File-level stylelint-disable comments on all 12 audited files, referencing the tracking issue.
Removed redundant :has() from @primer/styled-react BaseStyles. Same :has([data-color-mode]) pattern already removed from @primer/react in #7325. The global selectors already handle input color-scheme.
:has() guidance in CSS instructions (.github/instructions/css.instructions.md) covering safe vs dangerous patterns.

Full audit with per-selector risk assessment posted on the tracking issue.

Changelog

New

Stylelint rule blocking :has() pseudo-class by default with Safari perf warning

Changed

Added stylelint-disable audit comments to 12 existing CSS files with :has() usage
CSS coding instructions now include :has() guidance

Removed

Removed expensive :has([data-color-mode]) selectors from @primer/styled-react BaseStyles (redundant with existing global selectors)

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Verified stylelint catches new :has() usage with clear error message
Verified all existing files pass lint with stylelint-disable comments
Full npm run lint:css passes clean

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

cc @mattcosta7

changeset-bot · 2026-03-27T17:25:55Z

🦋 Changeset detected

Latest commit: 5e93384

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Patch
@primer/styled-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-03-27T17:26:23Z

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot

Pull request overview

Audits and hardens :has() selector usage across the Primer React monorepo to prevent Safari/WebKit performance regressions, adding lint guardrails and documenting safe usage patterns.

Changes:

Add a Stylelint rule to disallow :has() by default with a Safari performance warning message.
Add stylelint-disable audit comments to existing CSS Module files that already rely on :has().
Remove redundant :has([data-color-mode]) selectors from @primer/styled-react BaseStyles and document :has() guidance for contributors.

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
stylelint.config.mjs	Disallows `:has()` via Stylelint rule with error message guidance.
packages/styled-react/src/components/BaseStyles.tsx	Removes `:has([data-color-mode])` selectors from global BaseStyles styling.
packages/react/src/experimental/SelectPanel2/SelectPanel.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/TreeView/TreeView.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Timeline/Timeline.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/SegmentedControl/SegmentedControl.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/PageHeader/PageHeader.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Dialog/Dialog.module.css	Adds file-level Stylelint disable for audited `body:has(...)` legacy path.
packages/react/src/ButtonGroup/ButtonGroup.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Button/ButtonBase.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/Breadcrumbs/Breadcrumbs.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/AvatarStack/AvatarStack.module.css	Extends existing disables to include the new `:has()` disallow rule.
packages/react/src/ActionList/Group.module.css	Adds file-level Stylelint disable for audited `:has()` usage.
packages/react/src/ActionList/ActionList.module.css	Extends existing disables to include the new `:has()` disallow rule.
.github/instructions/css.instructions.md	Documents `:has()` risks, safe patterns, and the required lint override approach.

stylelint.config.mjs

.github/instructions/css.instructions.md

mattcosta7 · 2026-03-27T20:47:14Z

packages/react/src/Dialog/Dialog.module.css

 */
-/* stylelint-disable-next-line selector-no-qualifying-type */
+/* stylelint-disable-next-line selector-no-qualifying-type, selector-pseudo-class-disallowed-list -- :has() on body guarded by feature flag negation, audited (github/github-ui#17224) */
 body:not([data-dialog-scroll-optimized]):has(.Dialog.DisableScroll) {


we can/should just ship the flag here that enables the optimization path soon!

I just keep missing the window's where it's unlocked to do that
#7633

I've added #7633 to my list of “PRs to merge in the next release.” I’ll keep an eye on it and merge it the next time main is unlocked.

primer · 2026-04-02T14:51:46Z

🤖 Formatting issues have been automatically fixed and committed to this PR.

hectahertz requested a review from a team as a code owner March 27, 2026 17:25

hectahertz requested review from Copilot and liuliu-dev March 27, 2026 17:25

Copilot started reviewing on behalf of hectahertz March 27, 2026 17:26 View session

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 27, 2026

Copilot AI reviewed Mar 27, 2026

View reviewed changes

stylelint.config.mjs Outdated Show resolved Hide resolved

.github/instructions/css.instructions.md Outdated Show resolved Hide resolved

hectahertz requested a review from jonrohan March 27, 2026 17:33

github-actions bot temporarily deployed to storybook-preview-7708 March 27, 2026 17:35 Inactive

hectahertz deployed to github-pages March 27, 2026 17:44 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7708 March 27, 2026 17:44 Inactive

mattcosta7 reviewed Mar 27, 2026

View reviewed changes

hectahertz deployed to github-pages March 30, 2026 09:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7708 March 30, 2026 09:24 Inactive

hectahertz mentioned this pull request Mar 30, 2026

perf(ActionList): replace :has() selector with JS-computed attribute #7714

Open

13 tasks

jonrohan approved these changes Mar 30, 2026

View reviewed changes

hectahertz enabled auto-merge March 31, 2026 09:24

hectahertz deployed to github-pages March 31, 2026 09:35 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7708 March 31, 2026 09:36 Inactive

liuliu-dev approved these changes Mar 31, 2026

View reviewed changes

hectahertz deployed to github-pages April 1, 2026 14:16 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7708 April 1, 2026 14:16 Inactive

hectahertz added 3 commits April 2, 2026 16:44

perf(css): audit :has() selectors and add stylelint guard for Safari

b136a4d

refactor(css): use scoped stylelint disables instead of file-level

d810452

chore: changeset

b66b0cd

hectahertz force-pushed the hectahertz/perf-css-has-safari-audit branch from b025450 to b66b0cd Compare April 2, 2026 14:45

chore: auto-fix lint and formatting issues

5e93384

github-actions bot temporarily deployed to storybook-preview-7708 April 2, 2026 14:56 Inactive

primer bot deployed to github-pages April 2, 2026 15:05 View deployment

github-actions bot deployed to storybook-preview-7708 April 2, 2026 15:06 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

perf(css): audit :has() selectors and add stylelint guard for Safari#7708

perf(css): audit :has() selectors and add stylelint guard for Safari#7708
hectahertz wants to merge 4 commits intomainfrom
hectahertz/perf-css-has-safari-audit

hectahertz commented Mar 27, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 27, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

mattcosta7 Mar 27, 2026

Uh oh!

liuliu-dev Mar 27, 2026

Uh oh!

primer bot commented Apr 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

hectahertz commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 27, 2026

⚠️ Action required

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

mattcosta7 Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

liuliu-dev Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

primer bot commented Apr 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

hectahertz commented Mar 27, 2026 •

edited

Loading

changeset-bot bot commented Mar 27, 2026 •

edited

Loading